<template>
  <div class="medical-platform" :class="currentTheme">
    <!-- 顶部导航栏 -->
    <header class="platform-header">
      <div class="header-content">
        <div class="brand-section">
          <div class="logo-container">
            <img src="../assets/logo.png" alt="医疗平台Logo" class="platform-logo" />
            <div class="brand-text">
              <h1 class="platform-title">中西医结合智能转诊平台</h1>
              <p class="platform-subtitle">连接中西医资源，优化患者诊疗路径</p>
            </div>
          </div>
        </div>
        
        <div class="header-actions">
          <div class="theme-toggle">
            <button 
              class="theme-btn" 
              :class="{ active: currentTheme === 'tcm' }" 
              @click="switchTheme('tcm')"
            >
              <el-icon><Histogram /></el-icon>
              中医主题
            </button>
            <button 
              class="theme-btn" 
              :class="{ active: currentTheme === 'western' }" 
              @click="switchTheme('western')"
            >
              <el-icon><Monitor /></el-icon>
              西医主题
            </button>
          </div>
          
          <div class="system-health">
            <div class="health-status" :class="systemStatus">
              <span class="status-dot"></span>
              {{ statusText }}
            </div>
            <div class="current-time">{{ currentTime }}</div>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="platform-main" >
      <!-- 欢迎区域 -->
      <section class="welcome-section">
        <h2 class="welcome-title">欢迎使用中西医结合智能转诊平台</h2>
        <p class="welcome-text">本平台致力于打通中西医资源壁垒，为患者提供最优质的诊疗方案</p>
        <button class="emergency-btn" @click="handleEmergency">
          <el-icon><Phone /></el-icon>
          急诊通道
        </button>
      </section>
      
      <!-- 核心功能卡片 -->
      <section>
        <h2 class="section-title">核心功能</h2>
        <div class="feature-grid">
          <div 
            v-for="feature in coreFeatures" 
            :key="feature.id"
            class="feature-card"
            :class="feature.type"
            @click="navigateTo(feature.route)"
          >
            <el-icon class="feature-icon">
              <component :is="feature.icon" />
            </el-icon>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
          </div>
        </div>
      </section>
      
      <!-- 快速入口区域 -->
      <section>
        <h2 class="section-title">快速入口</h2>
        <div class="access-grid">
          <div class="access-card diagnosis-card" @click="navigateTo('/diagnosis')">
            <el-icon class="access-icon"><ChatDotRound /></el-icon>
            <h3 class="access-title">智能诊断</h3>
            <p class="access-desc">AI辅助诊断，中西医结合分析</p>
          </div>
          
          <div class="access-card doctors-card" @click="navigateTo('/doctors')">
            <el-icon class="access-icon"><User /></el-icon>
            <h3 class="access-title">专家资源</h3>
            <p class="access-desc">优质医生资源，在线咨询预约</p>
          </div>
          
          <div class="access-card records-card" @click="navigateTo('/records')">
            <el-icon class="access-icon"><Document /></el-icon>
            <h3 class="access-title">健康档案</h3>
            <p class="access-desc">电子病历，检查报告，用药记录</p>
          </div>
          
          <div class="access-card appointment-card" @click="navigateTo('/appointment')">
            <el-icon class="access-icon"><Calendar /></el-icon>
            <h3 class="access-title">预约挂号</h3>
            <p class="access-desc">线上预约，智能分诊</p>
          </div>
        </div>
      </section>
      
      <!-- 数据概览 -->
      <section>
        <h2 class="section-title">平台数据</h2>
        <div class="overview-grid">
          <div class="overview-card" @click="navigateTo('/stats/referrals')">
            <el-icon class="overview-icon"><User /></el-icon>
            <div class="overview-data">
              <span class="data-number">1,247</span>
              <span class="data-label">转诊总数</span>
            </div>
          </div>
          
          <div class="overview-card" @click="navigateTo('/stats/consultations')">
            <el-icon class="overview-icon"><VideoCamera /></el-icon>
            <div class="overview-data">
              <span class="data-number">89</span>
              <span class="data-label">远程会诊</span>
            </div>
          </div>
          
          <div class="overview-card" @click="navigateTo('/stats/records')">
            <el-icon class="overview-icon"><Files /></el-icon>
            <div class="overview-data">
              <span class="data-number">5,632</span>
              <span class="data-label">健康档案</span>
            </div>
          </div>
          
          <div class="overview-card" @click="navigateTo('/stats/analytics')">
            <el-icon class="overview-icon"><DataAnalysis /></el-icon>
            <div class="overview-data">
              <span class="data-number">342</span>
              <span class="data-label">分析指标</span>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 底部信息 -->
    <footer class="platform-footer">
      <div class="footer-content">
        <p>© 2025 中西医结合智能转诊平台 版权所有</p>
        <p>技术支持：医疗信息化部门</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Histogram, 
  User, 
  Monitor, 
  ChatDotRound, 
  Calendar, 
  Document,
  Phone,
  VideoCamera,
  Files,
  DataAnalysis
} from '@element-plus/icons-vue'

const router = useRouter()

// 添加登陆状态管理
const isLoggedIn = ref(false)

// 检查登录状态的方法
const checkLoginStatus = ()=>{
  const token = localStorage.getItem('authToken')
  isLoggedIn.value = !!token
}

// 主题管理
const currentTheme = ref('tcm')

const switchTheme = (theme) => {
  currentTheme.value = theme
  // 更新文档根元素的主题属性，用于CSS变量切换
  document.documentElement.setAttribute('data-theme', theme)
}

// 系统状态
const systemStatus = ref('healthy')
const statusText = computed(() => {
  const statusMap = {
    healthy: '系统正常',
    warning: '轻微异常', 
    error: '系统故障'
  }
  return statusMap[systemStatus.value]
})

// 时间显示
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

// 核心功能数据 - 简化版
const coreFeatures = ref([
  {
    id: 1,
    title: '智能转诊',
    description: 'AI辅助的精准转诊系统',
    icon: 'User',
    type: 'primary',
    route: '/referral'
  },
  {
    id: 2,
    title: '远程会诊',
    description: '多专家协同诊疗平台',
    icon: 'VideoCamera',
    type: 'success',
    route: '/consultation'
  },
  {
    id: 3,
    title: '健康档案',
    description: '全生命周期健康管理',
    icon: 'Files',
    type: 'info',
    route: '/health-records'
  },
  {
    id: 4,
    title: '数据分析',
    description: '医疗大数据智能分析',
    icon: 'DataAnalysis',
    type: 'warning',
    route: '/analytics'
  }
])

// 统一导航方法
const navigateTo = (route)=>{
  checkLoginStatus()

  if(!isLoggedIn.value){
    console .log('未登录，跳转到登录页面')
    router.push('/login')
    return
  }

  console.log('已登录，跳转到：', route)
  router.push(route)
}

// 处理急诊通道
const handleEmergency = () => {
  // 处理急诊通道逻辑
  console.log('启动急诊通道')
  router.push('/emergency')
}

const navigateToFeature = (route) => {
  if (route) {
    console.log('导航到:', route)
    router.push(route)
  }
}

// 生命周期
let timeInterval

onMounted(() => {
  // 初始化时间显示
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  checkLoginStatus() //初始化时检查登录状态
  // 初始化主题
  switchTheme('tcm')
  
  // 模拟系统状态变化（仅用于演示）
  setTimeout(() => {
    systemStatus.value = 'warning'
  }, 30000)
})

onUnmounted(() => {
  // 清理定时器
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>

:root{
  --theme-color-rgb: 64, 158, 255;
}

/* 基础样式 */
.medical-platform {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  --background: #f5f7fa;
  --card-bg: white;
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --border-color: #DCDFE6;
  --border-radius: 8px;
  --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  min-height: 100vh;
  background: var(--background);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 主题变体 */
.medical-platform.tcm {
  --theme-color: #67C23A;
  --theme-light: #f0f9eb;
  --theme-dark: #529b2e;
  --theme-color-rgb: 103, 194, 58;
}

.medical-platform.western {
  --theme-color: #409EFF;
  --theme-light: #ecf5ff;
  --theme-dark: #337ecc;
}

/* 顶部导航栏 */
.platform-header {
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 15px 30px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-section {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.platform-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.platform-title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--theme-color);
}

.platform-subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.theme-toggle {
  display: flex;
  gap: 10px;
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-btn.active {
  background: var(--theme-light);
  color: var(--theme-color);
  border-color: var(--theme-color);
}

.system-health {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.health-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
}

.health-status.healthy {
  color: var(--success-color);
}

.health-status.warning {
  color: var(--warning-color);
}

.health-status.error {
  color: var(--danger-color);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.current-time {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* 主要内容区域 */
.platform-main {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 欢迎区域 */
.welcome-section {
  background: var(--theme-light);
  border-radius: var(--border-radius);
  padding: 30px;
  text-align: center;
}

.welcome-title {
  color: var(--theme-color);
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.welcome-text {
  color: var(--text-regular);
  margin-bottom: 20px;
}

.emergency-btn {
  background: var(--danger-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.emergency-btn:hover {
  background: #f78989;
  transform: translateY(-2px);
}

/* 核心功能卡片 */
.section-title {
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 1.5rem;
  text-align: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-top: 4px solid transparent;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card.primary {
  border-top-color: var(--primary-color);
}

.feature-card.success {
  border-top-color: var(--success-color);
}

.feature-card.warning {
  border-top-color: var(--warning-color);
}

.feature-card.info {
  border-top-color: var(--info-color);
}

.feature-icon {
  font-size: 2rem;
  color: var(--theme-color);
}

.feature-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.feature-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 快速入口区域 */
.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.access-card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
}

.access-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.access-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.access-title {
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

.access-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.diagnosis-card .access-icon {
  color: var(--primary-color);
}

.doctors-card .access-icon {
  color: var(--success-color);
}

.records-card .access-icon {
  color: var(--info-color);
}

.appointment-card .access-icon {
  color: var(--warning-color);
}

/* 数据概览 */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.overview-card {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.overview-card:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
  120deg,
  rgba(var(--theme-color-rgb), 0.1) 0%,
  rgba(var(--theme-color-rgb), 0.05) 100%,
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overview-card:hover{
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  .data-number,
  .data-label{
    transition: all 0.3s ease;
  }
}

.medical-platform.tcm.overview-card:hover{
  background: rgba(103, 194, 58, 0.05);
}

.medical-platform.western.overview-card:hover{
  background: rgba(64, 158, 255, 0.05);
}
.overview-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--theme-color);
}

.overview-data {
  display: flex;
  flex-direction: column;
}

.data-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text-primary);
}

.data-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 底部信息 */
.platform-footer {
  background: var(--card-bg);
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--border-color);
}

.footer-content p {
  margin: 5px 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .overview-card:hover{
    transform: translateY(-3px) scale(1.01);

    @keyframes datapulse {
      50%{
        transform: scale(1.08);
      }

    }
  }


  .platform-header {
    padding: 15px;
  }

  .header-content {
    flex-direction: column;
    gap: 15px;
  }

  .platform-main {
    padding: 15px;
  }

  .feature-grid,
  .access-grid,
  .overview-grid {
    grid-template-columns: 1fr;
  }
}


</style>
